/*
 * @Description: 档案鉴定管理操作
 * @Author: Rfan
 * @Date: 2022-07-29 16:18:02
 * @LastEditTime: 2022-08-09 11:53:10
 */

import { Button, Divider, Form, Select, Space } from 'antd';
import cs from 'classnames';
import { usePendingListContext } from '../contexts/PendingListContext';

const { Option } = Select;
const PageOperate = (props: any) => {
  const { classname } = props;
  const { selectItems, deleteItem, stateList } = usePendingListContext();

  const deleteSelectPendingList = () => {
    deleteItem(selectItems, `您已选择了${selectItems.length}个档案，是否确认移除?`);
  };

  return (
    <>
      <div className={cs('filter-container', 'page-operate', classname)}>
        <div>
          <Space>
            案卷列表
            <Form layout="inline">
              <Form.Item label="状态筛选">
                <Select style={{ width: 100 }}>
                  {stateList.map((item: any) => (
                    <Option key={item.id} value={item.id}>
                      {item.name}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </Form>
          </Space>
        </div>
        <Space size="small">
          <Button disabled>加入鉴定批次</Button>
          <Button
            disabled={selectItems.length <= 0}
            onClick={() => {
              deleteSelectPendingList();
            }}
          >
            删除
          </Button>
          <Divider type="vertical" />
          <Button disabled>筛选</Button>
        </Space>
      </div>
    </>
  );
};

export default PageOperate;
